In September 2024, Josh W. Comeau announced the launch of a new version of his blog, which he had been developing over the past few months. While the design remained largely similar, he aimed for a more refined look, with significant changes occurring behind the scenes. The blog had evolved into a complex application, comprising over 100,000 lines of code, and the migration process was both challenging and educational. Comeau intended to share insights about the new technology stack he employed, hoping to assist others interested in starting their own blogs or utilizing similar technologies. The core stack of the new blog includes several advanced technologies such as Next.js, React, MDX, Linaria, and MongoDB, among others. Comeau acknowledged that this stack might seem excessive for a blog, but he had specific reasons for his choices. He required robust MDX support for his posts, aimed to minimize context-switching with his course platform, and sought to gain experience with the latest React features. A significant change in the new blog was the transition from the older Pages Router to the newly introduced App Router in Next.js. This new routing system reimagines how routing and rendering work in React, offering a more powerful and flexible approach. Comeau shared his experiences comparing the two systems, noting both the benefits and challenges of the migration. Content management on the blog is primarily handled through MDX, which combines Markdown and JSX, allowing for the inclusion of custom React components within blog posts. This flexibility enables Comeau to create interactive content without being limited by traditional Markdown. He discussed the advantages of using MDX over a full React approach, particularly in terms of writing experience and data accessibility. The blog's styling transitioned from styled-components to Linaria, a CSS-in-JS library that compiles to CSS modules, making it compatible with React Server Components. Although Comeau faced challenges integrating Linaria with Next.js, he found it to be a powerful tool. He also expressed excitement about Pigment CSS, a new zero-runtime CSS-in-JS tool that he plans to explore in the future. Comeau revamped the code snippets on his blog with a custom-designed syntax theme and switched to Shiki for syntax highlighting, which operates at compile-time and does not add to the JavaScript bundle size. This change allowed for better performance and flexibility in supporting multiple programming languages. The blog features interactive code playgrounds powered by Sandpack, enabling users to experiment with code snippets directly on the site. Comeau also created reusable components for interactive demos, utilizing libraries like React Spring and Framer Motion for animations. For data management, he implemented a like button that stores user interactions in MongoDB, ensuring anonymity through hashed IP addresses. He opted for a fetch and Route Handler solution over Server Actions, finding it more straightforward for his needs. Comeau emphasized the importance of cohesive design across components, investing time in ensuring that elements like code snippets and side notes worked harmoniously together. He also introduced a dynamic rainbow feature on the homepage, which users can customize in real-time, showcasing the capabilities of PartyKit for real-time interactions. The blog now includes a search feature powered by Algolia, enhancing user experience. Comeau refined the icons used throughout the site, adding micro-interactions for a more engaging interface. He also prioritized accessibility by implementing rem-based media queries, reflecting his commitment to creating an inclusive web experience. In his reflections on the App Router, Comeau noted both its advantages and drawbacks, particularly regarding development speed and performance. He expressed optimism about the future of the App Router and its potential once the Next.js team addresses current issues. Overall, Comeau's blog serves as a testament to his journey in web development, showcasing the technologies and design principles he values while providing insights for others looking to build their own projects.

Jacob Wenger reflects on the evolution of his personal website, which has transitioned through various technologies, starting from basic HTML and CSS to Create React App, and eventually to Gatsby. However, he found Gatsby to be outdated and sought a more modern solution, leading him to adopt Astro, a framework that revitalized his site. Wenger outlines several motivations for redesigning his website. He aimed to create a dedicated space for writing that he could fully control, reduce the maintenance burden that had accumulated with his Gatsby site, and achieve a more professional design that mirrored his growth as a developer and designer. The redesign brought significant visual changes, including a new writing section for blog posts complete with an RSS feed, a more focused hero section, an updated color scheme, and a simpler design with fewer images and animations. The work history was also updated to reflect accuracy. On a technical level, Wenger's codebase underwent a complete overhaul. Stuck on an outdated version of Gatsby, he found that a full rewrite was the most efficient solution. His experience with Gatsby had been marred by complex data fetching, slow builds, and difficult upgrades. In contrast, Astro provided a smoother developer experience and improved site performance. Both Gatsby and Astro are static site generators, but they differ in their rendering and interactivity approaches. Gatsby generates static HTML and then hydrates it into a Single Page Application, while Astro operates as a Multi-Page Application by default, delivering static HTML with minimal JavaScript. Astro's advantages became apparent during the migration process. Its component-based design allowed Wenger to leverage familiar React-like benefits without the associated dependencies. The data handling was simplified, moving away from complex GraphQL queries to straightforward data access. Astro's support for TypeScript enhanced development speed and confidence, and its integrations required less code and configuration compared to Gatsby. The framework's flexibility allowed him to use React for specific components, such as a newsletter signup form, without being locked into Astro's ecosystem. Additionally, the documentation provided was extensive and well-organized, aiding in the migration process. However, the transition to Astro was not without challenges. Wenger had to rethink his styling strategy, as Astro's approach to conditional CSS was more cumbersome than using styled-components. Converting from untyped React components to Astro components with TypeScript was time-consuming, though ultimately beneficial. He also encountered limitations with the lack of multiple exports from .astro files, which complicated code organization. Despite these challenges, Wenger is pleased with the results of the redesign. The website now loads quickly, with minimal page sizes and high performance metrics. He successfully achieved his initial goals: establishing a dedicated writing space, reducing maintenance overhead, and refreshing the site's appearance to better reflect his skills and aesthetic preferences. Looking ahead, Wenger views his website as a platform for sharing his work rather than a source of frustration. The redesign has made it simpler yet more capable, aligning with his desire for a development process that brings joy. He concludes that the best framework is one that meets current needs, and for him, Astro is fulfilling that role effectively.

Node.js recently revamped its website. This article explains the story of how it was redesigned. The site has many converging use cases, thousands of pages, and is a daily resource to many. Developers iterated to create a revamped developer experience, clearer CI/CD feedback, and an approachable tech stack.

The blog post discusses the concept of component composition in React, emphasizing its significance as a core advantage of the framework. Initially, the author reflects on their early experiences with React, highlighting features like the Virtual DOM, one-way data flow, and JSX. However, they argue that the true strength of React lies in its ability to compose components into more complex structures, a practice that was not widely accepted in software development a decade ago. The author addresses the traditional notion of separation of concerns, suggesting that while it still exists, it has evolved. Instead of separating styles, logic, and markup into distinct layers, React encourages grouping them together within components, leading to better code cohesion. This shift allows developers to think in terms of components, which can enhance the organization and maintainability of code. The discussion then shifts to conditional rendering, a common practice in React where components are rendered based on certain conditions. The author presents an example of a `ShoppingList` component that conditionally renders user information and items based on the presence of data. While this approach is acceptable for simple cases, the author warns that it can become problematic when managing multiple states within a single component. As the complexity of the component increases, the author illustrates how conditional rendering can lead to a convoluted structure that is difficult to read and maintain. They propose breaking down the component into smaller, more manageable pieces, suggesting the use of a layout component to encapsulate shared elements while allowing for dynamic content based on the component's state. The author advocates for using early returns to handle different states of a component more clearly. By returning early for each state (e.g., loading, no data, or displaying data), the code becomes easier to follow and reduces cognitive load. This method also facilitates the addition of new conditions, such as error handling, without complicating the existing logic. The post concludes by emphasizing the importance of component composition and the need to avoid excessive conditional rendering. The author encourages developers to embrace early returns and to continually reassess their component structures to ensure clarity and maintainability. They invite readers to engage with them for further discussion or questions, reinforcing the community aspect of learning and sharing knowledge in the React ecosystem.

Sahil Lavingia, the CEO of Gumroad, shared insights on the decision-making process regarding the technology stack for a new project called Helper. Initially, there was optimism about using htmx, a framework designed to simplify interactions in web applications. Lavingia's enthusiasm was influenced by past experiences with React, which he felt was often too complex for their needs. He believed htmx could provide a lightweight alternative for adding simple interactions. However, as the project progressed, the team encountered several challenges that led them to abandon htmx in favor of React and Next.js. One of the primary issues was the developer experience; while htmx could technically accomplish their goals, the process felt forced and less intuitive compared to the natural flow they experienced with Next.js. This was particularly evident when building complex forms that required dynamic validation and conditional fields, where htmx necessitated convoluted server-side logic. User experience also suffered with htmx, as it tended to push the application towards a Rails/CRUD approach, resulting in a generic and uninspiring interface. The team faced significant hurdles when trying to implement features like drag-and-drop functionality, which was much smoother and more efficient with React libraries. Another factor was the support from AI tools, which were more familiar with Next.js than htmx. This discrepancy affected their development speed and problem-solving capabilities, as resources for React/Next.js were more abundant and accessible. As the project grew in complexity, htmx's limitations became more pronounced. The simplicity that initially attracted the team began to feel restrictive, especially when they needed to implement sophisticated interactions and manage state across multiple components. The vast ecosystem surrounding React and Next.js provided solutions to many challenges, whereas htmx often required the team to create custom solutions or compromise on functionality. Ultimately, the transition to React and Next.js allowed Gumroad to enhance the user experience significantly. Features like drag-and-drop functionality, complex state management, dynamic form generation, and real-time collaboration were easier to implement and optimize within the React ecosystem. The team found that React's tools and libraries facilitated a more engaging and responsive application. Lavingia concluded that while htmx has its merits, particularly for simpler projects or those built on existing server-rendered applications, the specific needs of the Helper project made React and Next.js the better choice. He acknowledged the importance of selecting technologies that can grow with a project and support long-term goals. The experience reinforced the idea that understanding a project's unique requirements is crucial in choosing the right tools, and he remains open to reevaluating their tech stack as needs evolve and new technologies emerge.

Web development started with simple HTML and CSS. Eventually, client-side JavaScript allowed for more dynamic websites. The need for SEO and performance led to the creation of server-side rendering and frameworks like Next.js. JavaScript's shortcomings led to TypeScript and Svelte. At the end of the day, the core goal of all these evolutions was to create enjoyable user experiences, so the tools being used don't matter much.

This is an open-source starter kit for building production-ready SaaS applications. It uses a curated stack of tools, including Next.js, Supabase, and TailwindCSS, organized as a monorepo with a focus on code reuse and best practices.

Headless UI v2.0 for React features built-in anchor positioning, a new checkbox component, HTML form components, combobox list virtualization, a new website, improved docs, and improved hover, focus, and active state detection. The improvements are aimed at helping developers write less code and making the developer experience even better. This article details the most interesting new improvements. An upgrade guide is available for those transitioning from v1.x.

The content revolves around a GitHub repository named "zero," which is described as an experimental approach to modern frontend development without relying on traditional frameworks. The repository is maintained by a user named "nhh" and has garnered attention with 72 stars and 1 fork. The core concept of Zero is to provide a set of types and functions that allow JSX to be transpiled directly into DOM nodes. This approach aims to eliminate the need for developers to update frameworks, as Zero operates directly with the DOM, making it a more stable and straightforward solution for building web applications. Zero is not intended to be a full-fledged framework; instead, it focuses on simplicity and direct interaction with the DOM. The creator emphasizes that modern frameworks often serve the needs of developers more than those of users, leading to unnecessary updates and complexity. By using Zero, developers can avoid these pitfalls and work with a more streamlined process. The repository includes example code demonstrating how to use Zero. It showcases the creation of DOM elements using JSX syntax, dependency injection, and the use of modern DOM APIs. The code snippets illustrate how to define components, manage state without reactivity, and perform asynchronous operations like fetching data from an API. Under the hood, Zero consists of a few snippets and configurations that facilitate the transpilation of JSX to JavaScript. The runtime JavaScript code provided in the repository outlines how elements are created and how event listeners are attached. It also includes a Vite configuration file that specifies how to handle TypeScript and JSX files, ensuring that the necessary functions are injected into the main JavaScript file. Additionally, Zero offers a set of types that enhance the developer experience by connecting JSX types with DOM types. This includes custom interfaces and type definitions that allow for better type checking and autocompletion in development environments. Overall, the Zero repository presents an innovative approach to frontend development, prioritizing simplicity and direct interaction with the DOM while providing a developer-friendly experience through TypeScript and JSX integration.

This developer built the same web application using different web frameworks: FastAPI, FastHTML, Next.js, SvelteKit, and FastAPI combined with Svelte. They compared the developer experience and unique features of each framework by implementing CRUD operations in a simple "Look at Your Data" app. FastAPI and FastHTML were more concise in code, while Next.js and SvelteKit required more code but offered a more structured approach and better UI elements.

The web is buzzing with innovation. New CSS and UI features are reshaping how we create beautiful and engaging web experiences. Highlights from Google I/O 2024 include scroll-driven animations, view transitions, and anchor positioning, each offering exciting possibilities for web development. These advancements can simplify complex interactions, boost performance, and elevate the user experience.

Reweb is a visual website builder specifically designed for developers, leveraging the capabilities of Next.js and Tailwind CSS. It aims to streamline the web development process, allowing users to build websites quickly and efficiently without the need for extensive coding knowledge. The platform emphasizes a no-code approach, enabling developers to export applications that utilize Next.js, Tailwind, and Shadcn UI, while also offering extensive customization options. The visual editing feature of Reweb is tailored for developers, providing an interface that feels familiar and intuitive, akin to editing code but in a visual format. This allows users to make changes in real-time, enhancing the overall development experience. The platform also includes tools for task and issue management, which helps teams optimize their workflows and unlock their full potential. Reweb offers a variety of features to facilitate rapid development. Users can edit Tailwind and Shadcn UI components visually, export high-quality Next.js code, and utilize pre-made templates to jumpstart their projects. Additionally, the platform includes AI-generated themes, allowing users to create appealing color palettes and designs based on simple prompts. The reception of Reweb has been overwhelmingly positive, with many developers praising its ease of use compared to other tools like Webflow and Framer. Users have expressed their appreciation for the platform's ability to simplify the process of building landing pages and other web projects, highlighting its natural workflow and the quality of the generated code. For those with questions or seeking further information, Reweb provides support through Discord and offers a comprehensive FAQ section addressing common inquiries about its features, learning curve, and code quality. Overall, Reweb positions itself as a powerful tool for developers looking to build websites efficiently while maintaining the flexibility to customize their projects extensively.

An in-depth YouTube tutorial on modern React.

Web components have become a topic of heated debate within the web development community, often sparking discussions about their future and relevance. Recently, Ryan Carniato's assertion that "Web Components Are Not the Future" was met with a counterpoint from Cory LaViska, who argued that they are indeed "the Present." Nolan Lawson, the author of the blog post, aims to bridge this divide and foster a more constructive dialogue. Lawson acknowledges Carniato's contributions to the web framework ecosystem, particularly in performance and framework design. He appreciates the insights shared in Carniato's post but believes there are some misconceptions regarding web components. He emphasizes that while performance is a critical aspect of web development, it is not the sole consideration. Other factors such as maintainability, security, usability, and accessibility also play significant roles in software development. Lawson argues that sometimes trade-offs must be made, and prioritizing performance at the expense of accessibility, for example, is not a viable approach. He draws a parallel between web performance optimization and speedrunning in video games, suggesting that while some developers may focus on micro-optimizations, the broader context of user experience and functionality should not be overlooked. Lawson believes that while minimizing DOM nodes can enhance performance, it is not always necessary to pursue the absolute fastest option. He also points out that custom elements can coexist with different frameworks, allowing for gradual migrations and the composition of micro-frontends. Addressing the concern about the "cost of standards," Lawson argues that supporting web components does not require excessive effort from framework authors. He believes that adapting to new web standards is part of the job and that developers can still create effective frameworks without being hindered by the introduction of new technologies. He acknowledges that some in the web development community may not be interested in web components, but he sees this diversity as a strength rather than a limitation. In conclusion, Lawson agrees with Carniato that web components have their limitations, particularly in areas like server-side rendering and accessibility. However, he also sees value in their use and encourages developers to explore the possibilities they offer. He emphasizes that the web is a vast landscape filled with diverse projects and approaches, and every new capability can serve as an opportunity for creativity. Ultimately, whether or not web components are the right choice depends on the specific needs and constraints of the project at hand.

TechCrunch has undergone a significant redesign aimed at enhancing user experience and engagement. The changes reflect a commitment to providing a more streamlined, immersive interface that allows readers to easily access the content they value, including in-depth news, analysis, and product reviews. The new design features improved navigation, a fresh color palette, and a modern aesthetic, all intended to make the site more visually appealing and user-friendly. The redesign was prompted by the realization that the previous site, which had not been updated since 2018, was becoming outdated and less functional. The back-end architecture had begun to deteriorate, necessitating a comprehensive overhaul. The team behind the redesign included former leadership and various contributors from TechCrunch, as well as external design agencies, all of whom collaborated to create a more effective platform for delivering news and insights. In addition to the aesthetic improvements, the new TechCrunch aims to enhance its reporting capabilities. The site will now provide real-time updates on significant stories and events, allowing readers to stay informed as news unfolds. This commitment to timely reporting is complemented by a focus on original content that covers a wide range of topics, from cybersecurity breaches to developments in the electric vehicle sector. TechCrunch is also introducing "In Brief" pieces, which highlight important stories from various sources, reflecting a broader commitment to curating relevant news for its audience. This approach acknowledges that readers seek diverse perspectives and the best coverage available, regardless of the outlet. Looking ahead, TechCrunch plans to continue evolving and improving its offerings in 2025 and beyond. The editorial team is eager to receive feedback from readers, emphasizing the importance of audience engagement in shaping the future of the platform. The redesign represents a significant step in TechCrunch's ongoing mission to be a leading source of technology news and analysis.

Jonas Hietala reflects on his 15-year journey of blogging, sharing insights into why he has maintained this practice over such a long period. He began his blog as a platform to document his attempts at creating game prototypes, driven by a desire to learn programming through game development. Initially, he found himself trapped in the complexities of building a game engine, which led to a lack of tangible progress. Discovering The Experimental Gameplay Project inspired him to shift his focus to rapid game prototyping, prompting the creation of his blog. As time passed, Hietala's blogging evolved beyond game development. He identifies several key reasons for his continued commitment to writing. Firstly, he enjoys the writing process itself, even though there have been periods of low productivity. Writing helps him clarify his thoughts and refine his ideas, akin to the process of refactoring code. The act of publishing his work encourages him to strive for higher quality, as he revises and polishes his posts before sharing them. The blog serves as a personal archive for documenting various projects, from building a 3D printer to writing a book. Hietala finds value in reviewing his past accomplishments, which counters feelings of stagnation. He also appreciates the blog as a creative outlet where he can experiment with technology and programming without external pressures. His motivations for blogging are intrinsic; he does not focus on external feedback or readership statistics, which he believes could detract from the joy of writing. Over the years, Hietala has experimented with different technologies for his blog, transitioning through various programming languages and frameworks. This exploration has kept the process engaging and allowed him to learn new skills. He notes that his posts have grown in length and complexity, reflecting his evolving interests and writing abilities. Initially, his entries were brief updates, but they have since transformed into more substantial pieces that require significant time and effort to produce. Looking ahead, Hietala acknowledges the unpredictability of the future but expresses a desire to continue blogging. He recognizes that his interests may shift again, but he is committed to enjoying the journey of writing and sharing his experiences.

The New York Times upgraded its React version, which brought some unexpected challenges. The upgrade required solving challenges with existing embedded interactives and managing script loading order. However, the result of the upgrade was immediately better performance. For example, its INP scores in the p75 range dropped by roughly 30% across the entire site.

Jake Lazaroff shares his experience of creating Waypoint, a local-first web application designed for trip planning, after feeling dissatisfied with existing tools during his travel sabbatical. The planning process for six months of travel proved to be overwhelming, prompting him to develop a solution that better suited his needs. Waypoint is inspired by the trip planning app Embark, created by Ink & Switch, which offers dynamic documents for organizing travel plans. However, since Embark was not publicly available, Lazaroff decided to build his own tool. He emphasizes that Waypoint is not production-ready and was created specifically for his personal use, highlighting its rough edges and lack of features like authentication. The motivation behind Waypoint stemmed from the shortcomings of other tools he tried. Apple Notes felt too basic, while Notion and Google Maps were cumbersome. Wanderlog was overly structured, making it difficult to explore and research. Lazaroff identified three key areas where Waypoint improves upon existing tools: quick data entry, easy comparisons, and the importance of unstructured data alongside structured data. The app features a dual-panel interface with a text editor on one side and a map on the other, allowing users to jot down notes and visualize locations simultaneously. Waypoint's design facilitates quick data entry, enabling users to type location names with an autocomplete feature. Unlike traditional mapping tools, which can be slow and cumbersome for organizing locations, Waypoint allows users to create route lists easily, with the map updating in real-time as they edit. The app also includes a focus mode that highlights the current paragraph, helping users concentrate on specific tasks while maintaining a clear view of their trip. Under the hood, Waypoint is built using SvelteKit, with custom components from the Shoelace library and a rich text editor powered by ProseMirror. The mapping and location search functionalities utilize Stadia Maps and MapLibre GL JS. A key feature of Waypoint is its use of Yjs, a CRDT (Conflict-free Replicated Data Type) library that allows for local data storage and real-time collaboration without relying on a centralized server. This local-first approach ensures that users can work offline and retain ownership of their data. Waypoint also incorporates Y-Sweet, a WebSocket sync backend that facilitates real-time collaboration. This setup allows multiple users to work on the same document simultaneously, with changes syncing seamlessly. Each document is identified by a UUID, enabling easy sharing and access across different devices. Lazaroff addresses the question of what constitutes a local-first application, asserting that if the client holds the canonical copy of the data, it qualifies as local-first. He evaluates Waypoint against several criteria proposed by Ink & Switch, concluding that it meets most of them, with a few exceptions regarding security and privacy. Reflecting on his experience, Lazaroff finds that building a local-first app is feasible with existing tools, and the integration of various libraries made the process smoother than expected. He notes that while text editors are particularly well-suited for local-first applications, challenges remain in integrating frameworks like Svelte with CRDTs. Despite some complexities, he appreciates the simplicity and reliability of the local-first architecture, which allows for offline functionality and straightforward data management. In conclusion, Lazaroff expresses his enjoyment in developing Waypoint and invites others to explore the code on GitHub, sharing his journey into the local-first ecosystem and the lessons learned along the way.

Tired of getting bogged down in pixel-perfect tweaks instead of building interesting features? Had enough back and forth with marketers and designers? Read the new Ebook by builder.io to learn how top dev teams have broken free from the limitations of traditional headless CMSs with the help of AI and visual development platforms. Download the guide (free)

New CSS features are being introduced quickly, but developers are slow to adopt them. This is due to browser support concerns, lack of visible improvements, and the difficulty of adding new features to code with existing patterns. The best way to start using these better features is to experiment with them in low-cost environments (like side projects) and adopt them incrementally into your codebase.

React 19 introduces several significant improvements designed to streamline development and boost application performance. Key features include a performance-enhancing compiler, simplified form handling with Actions, server-side rendering optimizations with Server Components, and better integration with Web Components. The update promises faster rendering, smoother user experiences, and easier development workflows.

This article goes over a complete frontend redesign of a website that involved creating a new header, a unique hero section featuring personalized hats drawn by the author's daughter, and a circular navigation for the hats section. It also incorporated interactive elements using Framer Motion and scroll-driven animations, along with the usage of CSS features like container queries, :has(), offset-path, and more.

The solution presented in this article adds a loading progress bar to Next.js sites using a custom ‘useProgress’ hook and a ‘ProgressLink’ component, making page transitions smooth without needing router events. It keeps sites responsive and interactive during loads by utilizing React’s ‘startTransition’. The method is future-proof and improves the user experience.

WebJSX is a library designed for building web applications using JSX and Web Components, emphasizing simplicity and efficiency. It provides two primary functions: `createElement`, which allows developers to create virtual DOM elements using JSX syntax, and `applyDiff`, which efficiently updates the real DOM by comparing virtual nodes. The library supports a straightforward installation process via npm, enabling developers to quickly integrate it into their projects. It fully embraces JSX syntax, allowing for the creation of virtual DOM elements and the updating of the real DOM seamlessly. For instance, a simple virtual DOM can be defined using JSX, and the `applyDiff` function can be used to render it in the actual DOM. WebJSX also facilitates the creation of custom Web Components. Developers can define custom elements by extending the `HTMLElement` class and implementing lifecycle methods such as `connectedCallback` and `attributeChangedCallback`. This allows for dynamic rendering based on attribute changes, with the ability to use JSX within the custom elements. Event handling is made easy with JSX, allowing developers to attach event listeners directly within their markup. Additionally, the library supports fragments, enabling the grouping of multiple elements without adding extra nodes to the DOM. The API includes methods for creating virtual DOM elements, applying differences to the DOM, and handling fragments. There are also advanced features like rendering suspension, which allows for batching property updates to minimize re-renders. For TypeScript users, WebJSX provides configuration options to handle JSX properly, and developers can declare custom elements to avoid TypeScript errors related to unknown HTML tags. WebJSX can be bundled with various tools, but it also supports direct module loading in web pages, making it flexible for different development environments. The library encourages community contributions, welcoming bug reports, feature suggestions, and pull requests. Overall, WebJSX is an open-source project licensed under the MIT license, aimed at simplifying the development of web applications with modern web standards.

Andrej Karpathy issued a long context challenge to make a blog post from a recent video of his. Claude 3 was able to perform this task with some data pre-processing help. The resulting blog post is high quality and interesting.

The React 19 Beta is now available on npm. The update includes new hooks, new APIS, and support for using async functions in transitions to handle pending states, errors, forms, and optimistic updates automatically. There are breaking changes, but they should not impact most apps. This article details the new features in the beta.

A developer shares lessons learned from running a simple static news archive website for learning Finnish. He enjoys using cronjobs and Git together as they complement each other nicely. He also thinks simplicity and working locally are severely underrated.

This author initially designed a strict, composable design system inspired by Chakra UI to solve inconsistencies and a poorly structured existing design system. However, the system proved difficult for many developers to use due to their lack of experience with functional composition. In hindsight, the author believes a design system built around Tailwind/NativeWind would have been more approachable for developers.

Jake Lazaroff shares his experience of creating Waypoint, a local-first web application designed for trip planning, after finding existing tools inadequate for his needs during a six-month travel sabbatical. The planning process was challenging, leading him to develop a solution that allows for quick data entry, easy comparisons, and the integration of unstructured data alongside structured data. Waypoint features a dual-panel interface with a text editor on one side and a map on the other, enabling users to jot down notes about potential destinations and visualize routes simultaneously. This design addresses the shortcomings of other tools, such as Apple Notes and Google Maps, which either lack flexibility in data entry or complicate the visualization of locations. The app allows users to create route lists easily, with the ability to toggle between driving directions and straight-line routes, enhancing the planning experience. The underlying technology of Waypoint is built using SvelteKit, with custom components from the Shoelace library and a rich text editor powered by ProseMirror. The app utilizes Stadia Maps for location services and employs Yjs, a CRDT library, for local data storage. This local-first approach means that data is stored on the client rather than a centralized server, allowing for instantaneous editing and offline functionality. The app also supports real-time collaboration through Y-Sweet, a WebSocket sync backend that facilitates document sharing and synchronization between users. Lazaroff discusses the principles of local-first software, emphasizing that the client should maintain the canonical copy of the data. He evaluates Waypoint against several criteria proposed by Ink & Switch, concluding that it meets most of the ideals of local-first software, with a few exceptions regarding security and privacy. Through this project, Lazaroff learned that building a local-first app is feasible with existing tools, and the integration of various libraries can create a seamless user experience. He highlights the ease of adding offline support and the overall developer experience as significant advantages of this architecture. The article concludes with an invitation to explore the code behind Waypoint on GitHub, encouraging others to engage with the local-first ecosystem.

The blog post discusses the latest enhancements to the Chrome DevTools Performance panel, specifically focusing on monitoring Core Web Vitals. It highlights a series of new features aimed at improving the user experience for developers working on performance optimization. One of the key updates is the introduction of real-time local Core Web Vitals performance metrics, which allows developers to see how their local environment performs without needing to record sessions. This feature provides immediate feedback on metrics such as Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP), all of which are crucial for assessing user experience. The metrics are displayed in a color-coded format, making it easier to identify performance issues as they occur. Additionally, the Performance panel now integrates real-user experience data from the Chrome User Experience Report (CrUX) API. This data provides a comparative analysis between local performance and actual user experiences, helping developers prioritize their optimization efforts based on real-world usage patterns. The panel allows users to set up this feature easily, ensuring that the data reflects the most relevant conditions for their specific web pages. To further enhance the debugging process, the blog outlines recommendations for configuring the local environment to better simulate real user conditions. This includes suggestions for CPU and network throttling, which can help developers identify performance bottlenecks that may not be apparent in a typical development setup. The ability to emulate different device types and network conditions is emphasized as a way to uncover issues that could affect user experience. The post also introduces tools for reproducing performance issues, such as an interaction log that records user actions in real-time, providing insights into how these actions impact performance metrics. This feature allows developers to pinpoint slow interactions and understand their context within the page. In conclusion, the blog emphasizes the importance of grounding performance workflows in both real-time local data and real-user data. By leveraging these new features, developers can make more informed decisions about where to focus their optimization efforts, ultimately leading to a better user experience. The post encourages users to explore these new capabilities and provide feedback, indicating that further improvements to the Performance panel are on the horizon.